// css样式隔离，与vue类似，采用添加后缀的方式
export function ScopeCSS(style, appName) {
  // 样式隔离之前先关闭这个style标签的样式（替换textContent之后会生效）
  style.sheet.disabled = false

  style.textContent = getCssText(style.sheet.cssRules, appName)

  const observer = new MutationObserver(function () {
    // 有变化就断开监听
    observer.disconnect()
    // 重新处理，并且添加监听事件
    ScopeCSS(style, appName)
  })

  // 开始监听，并且监听子节点
  observer.observe(style, { childList: true })
}
// 从cssRules中获取替换后的样式字符串，并且拼接上appName
function getCssText(cssRules, appName) {
  let cssText = ''
  for (let item of cssRules) {
    // 有媒体查询的就遍历
    if (item.media) {
      cssText += `@media ${item.media.mediaText}{${getCssText(item.cssRules, appName)}}`
    } else {
      cssText += item.cssText.replace(item.selectorText, `${item.selectorText}[appName=${appName}]`)
    }
  }
  return cssText
}